<template>
    <div class="CustomBox">
        <div class="headerKey">
            <keyPart v-if="type == 'key'"></keyPart>
            <modelPart v-if="type == 'modal'"></modelPart>
            <fun v-if="type == 'fun'"></fun>
            <cache v-if="type == 'cache'"></cache>
            <url v-if="type == 'url'"></url>
        </div>
    </div>
</template>
<script>
    import { mapState } from 'vuex';
    import keyPart from '../custom/key';
    import modelPart from '../custom/model';
    import fun from '../custom/fun';
    import cache from '../custom/cache';
    import url from '../custom/url'

    export default {
        components: {
            url,
            cache,
            fun,
            keyPart,
            modelPart
        },
        computed: {
            ...mapState("customKey", {
                type: state => state.type,
            }),
        },
    }

</script>
<style scoped>
    .CustomBox {
        padding: 0px 20px 20px 20px;
        height: 100%;
        overflow-y: auto;
        overflow-x: scroll;
    }
</style>